<!--
    JBoss, Home of Professional Open Source
    Copyright 2015, Red Hat, Inc. and/or its affiliates, and individual
    contributors by the @authors tag. See the copyright.txt in the
    distribution for a full listing of individual contributors.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title>Contacts</title>
    <!-- Disable phone number detection on iOS.  -->
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Default theme with just 2 schemes, A (light) and B (dark) -->
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" type="text/css" media="all" />
<!--     <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" type="text/css" media="all" /> -->
<!--     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.5.2/jquery.mobile-1.5.2.min.css" /> -->

    <!-- Import jQuery so that it can be used by the custom JavaScript -->
    <script src="js/libs/jquery-2.1.1.js"></script>
<!--     <script src="js/libs/jquery-2.1.1.min.js"></script> -->
<!--     <script src="http://code.jquery.com/jquery-2.1.1.js"></script> -->

    <!-- This is the CSS for the Validation plug-in. -->
    <link rel="stylesheet" href="css/app-style.css" type="text/css" media="all" />
    <link rel="stylesheet" href="css/validator.css" type="text/css" media="all" />
<!--     <link rel="stylesheet" href="css/app-style.min.css" type="text/css" media="all" /> -->
<!--     <link rel="stylesheet" href="css/validator.min.css" type="text/css" media="all" /> -->

    <!-- This is the CSS for the International Telephone Input plug-in. -->
    <link rel="stylesheet" href="css/intlTelInput-6.4.3.css">

    <!-- Import the custom JavaScript -->
    <script src="js/namespace.js"></script>
    <script src="js/util.js"></script>
    <script src="js/formSetup.js"></script>
    <script src="js/app.js"></script>
    <script src="js/validation.js"></script>
    <script src="js/submissions.js"></script>
    <script src="js/theming.js"></script>
<!--     <script src="js/namespace.min.js"></script> -->
<!--     <script src="js/util.min.js"></script> -->
<!--     <script src="js/formSetup.min.js"></script> -->
<!--     <script src="js/app.min.js"></script> -->
<!--     <script src="js/validation.min.js"></script> -->
<!--     <script src="js/submissions.min.js"></script> -->
<!--     <script src="js/theming.min.js"></script> -->

    <!-- Mobile browsers do not support HTML5 form validation, this lib provides client side validation. -->
    <script src="js/libs/jquery.validate.js"></script>
<!--     <script src="js/libs/jquery.validate.min.js"></script> -->
<!--     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.js"></script> -->
    <script src="js/libs/additional-methods.js"></script>
<!--     <script src="js/libs/additional-methods.min.js"></script> -->
<!--     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/additional-methods.js"></script> -->

    <!-- The jQuery Validator plug-in does not cover enough of the phone number use cases. The intlTelInput plug-in was used
         instead as it covers all forms of phone numbers. -->
    <script src="js/libs/intlTelInput-libPhoneNumber-7.2.1.js"></script>
    <script src="js/libs/intlTelInput-6.4.3.js"></script>
<!--     <script src="js/libs/intlTelInput-6.4.3.min.js"></script> -->

    <!-- Because the mobileinit event is triggered immediately, you'll need to bind your event handler
         before jQuery Mobile is loaded.
         Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies
         many markup enhancements as soon as it loads (long before the document.ready event fires).
         Therefore call the jQuery Mobile code last. -->
    <script src="js/libs/jquery.mobile-1.4.5.js"></script>
<!--     <script src="js/libs/jquery.mobile-1.4.5.min.js"></script> -->
<!--     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.2.js"></script> -->

</head>
<body>
    <!-- This is the main list.  It is just names. -->
    <!-- It is worth noting that in a jQuery Mobile app, only the first "page" is loaded & displayed.
          The following/other pages will be partially loaded.  Just their "divs." -->
    <div data-role="page" id="contacts-list-page" class="ui-page-theme-a" data-url="/contacts-jquerymobile/">
        <div data-role="panel" id="contacts-list-page-menu-panel">
            <ul data-role="listview" id="contacts-list-page-menu-panel-listview">
                <li><a href="#contacts-add-page">Add Contact</a></li>
                <li><a href="#contacts-detail-list-page">Detailed List</a></li>
                <li><a href="#about-page">About</a></li>
                <li><a href="#contacts-theming-dialog" data-rel="popup" data-position-to="window">Themes</a></li>
            </ul>
        </div>
        <div data-role="header" data-position="fixed" >
            <a href="#contacts-list-page-menu-panel" id="contacts-list-page-menu-button" class="ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-notext ui-mini ui-btn-inline">Menu</a>
            <h1>Contacts</h1>
            <a href="#contacts-detail-list-page" id="contacts-detail-list-page-button" class="ui-btn ui-corner-all ui-shadow ui-icon-arrow-d ui-btn-icon-right ui-mini ui-btn-inline">Details</a>
        </div>
        <div role="main" class="ui-content">
            <form id="filter-form-list-page" class="ui-filterable">
                <input id="filter-input-list-page" data-type="search">
            </form>
            <ul data-role="listview" id="contacts-display-listview" class="sortedList" data-autodividers="true" data-filter="true" data-input="#filter-input-list-page">
                <!-- The list of Contacts gets inserted here.  -->
            </ul>
        </div>
        <div data-role="footer" >
            <h4>Red Hat JBoss Quickstarts</h4>
        </div>
        <!-- A Theme choosing dialog. -->
        <div data-role="popup" id="contacts-theming-dialog">
            <div data-role="header">
                <h1>Theming</h1>
            </div>
            <div role="main" class="ui-content">
                <h3>Try out these different Themes!</h3>
                <button id="theme-button-a" class="ui-btn ui-corner-all ui-shadow">A - Light</button>
                <button id="theme-button-b" class="ui-btn ui-corner-all ui-shadow">B - Dark</button>
            </div>
        </div>
    </div>

    <!-- This is the detail view of the main list.  -->
    <div data-role="page" id="contacts-detail-list-page" class="ui-page-theme-a" >
        <div data-role="panel" id="contacts-detail-list-page-menu-panel">
            <ul data-role="listview" id="contacts-detail-list-page-menu-panel-listview">
                <li><a href="#contacts-add-page">Add Contact</a></li>
                <li><a href="#contacts-list-page">List view</a></li>
                <li><a href="#about-page">About</a></li>
                <li><a href="#contacts-theming-dialog" data-rel="popup" data-position-to="window">Themes</a></li>
            </ul>
        </div>
        <div data-role="header" data-position="fixed" >
            <a href="#contacts-detail-list-page-menu-panel" id="contacts-detail-list-page-menu-button" class="ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-notext ui-mini ui-btn-inline">Menu</a>
            <h1>Contacts
            </h1>
            <a href="#contacts-list-page" id="contacts-list-page-button" class="ui-btn ui-corner-all ui-shadow ui-icon-arrow-d ui-btn-icon-right ui-mini ui-btn-inline">List</a>
        </div>
        <div role="main" class="ui-content">
            <form id="filter-form-detail-list-page" class="ui-filterable">
                <input id="filter-input-detail-list-page" data-type="search">
            </form>
            <ul data-role="listview" id="contacts-display-detail-listview" class="sortedList" data-autodividers="true" data-filter="true" data-input="#filter-input-detail-list-page">
                <!-- The list of Contacts gets inserted here.  -->
            </ul>
        </div>
        <div data-role="footer" >
            <h4>Red Hat JBoss Quickstarts</h4>
        </div>
    </div>

    <!-- This is for the Info/About page. -->
    <div data-role="page" id="about-page" class="ui-page-theme-a" >
        <div data-role="panel" id="contacts-about-page-menu-panel">
            <ul data-role="listview" id="contacts-about-page-menu-panel-listview">
                <li><a href="#contacts-add-page">Add Contact</a></li>
                <li><a href="#contacts-list-page">List view</a></li>
                <li><a href="#about-page">About</a></li>
                <li><a href="#contacts-theming-dialog" data-rel="popup" data-position-to="window">Themes</a></li>
            </ul>
        </div>
        <div data-role="header" data-position="fixed" >
            <a href="#contacts-about-page-menu-panel" id="contacts-about-page-menu-button" class="ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-notext ui-mini ui-btn-inline">Menu</a>
            <h1>About</h1>
        </div>
        <div role="main" class="ui-content" >
            <p>Learn more about Red Hat JBoss Enterprise Application Platform.</p>
            <ul>
                <li><a href="https://access.redhat.com/documentation/en/red-hat-jboss-enterprise-application-platform/">Documentation</a></li>
                <li><a href="http://www.redhat.com/en/technologies/jboss-middleware/application-platform">Product Information</a></li>
            </ul>
        </div>
    </div>

    <!-- A blank form for adding a contact. -->
    <div data-role="page" id="contacts-add-page" class="ui-page-theme-a" >
        <div data-role="panel" id="contacts-add-page-menu-panel">
            <ul data-role="listview" id="contacts-add-page-menu-panel-listview">
                <li><a href="#contacts-list-page">List view</a></li>
                <li><a href="#about-page">About</a></li>
                <li><a href="#contacts-theming-dialog" data-rel="popup" data-position-to="window">Themes</a></li>
            </ul>
        </div>
        <div data-role="header" data-position="fixed" >
            <a href="#contacts-add-page-menu-panel" id="contacts-add-page-menu-button" class="ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-notext ui-mini ui-btn-inline">Menu</a>
            <h1>Add Contact</h1>
        </div>
        <div role="main" class="ui-content">
            <!--
                In order to catch server side errors we need to disable the automatic page transition when the form is
                  submitted.  This done is by adding data-ajax="false" to the form element.  We then manually change the page
                  in the function that handles form submission. Thus allowing us to control when the form transitions to
                  another page.
             -->
            <form name="contacts-add-form" id="contacts-add-form" class="contact_info" method="post" data-ajax="false">
                <div>
                    <label for="contacts-add-input-firstName">First Name:</label>
                    <input name="firstName" id="contacts-add-input-firstName" class="name" data-clear-btn="true" value="" placeholder="Enter a first name." type="text"/>
                </div>
                <div>
                    <label for="contacts-add-input-lastName">Last Name:</label>
                    <input name="lastName" id="contacts-add-input-lastName" class="name" data-clear-btn="true" value="" placeholder="Enter a last name." type="text"/>
                </div>
                <div>
                    <label for="contacts-add-input-tel">Phone:</label>
                    <input name="phoneNumber" id="contacts-add-input-tel" class="phoneNumber" data-clear-btn="true" value="" type="tel"/>
                </div>
                <div>
                    <label for="contacts-add-input-email">Email:</label>
                    <input name="email" id="contacts-add-input-email" class="email" data-clear-btn="true" value="" placeholder="name@company.domain" type="email"/>
                </div>
                <div>
                    <label for="contacts-add-input-date">Birth Date:</label>
                    <input name="birthDate" id="contacts-add-input-date" class="birthDate" data-clear-btn="true" value="" placeholder="YYYY-MM-DD" type="date" min="1900-01-01"/>
                </div>
                <input id="submit-add-btn" data-inline="true" type="submit" value="Save" />
                <input id="clear-add-btn" data-inline="true" type="reset" value="Clear"  />
                <input id="cancel-add-btn" data-inline="true" type="reset" value="Cancel"  />
            </form>
        </div>
        <div data-role="footer" data-position="fixed" >
            <fieldset class="ui-grid-b">
                <!-- There is currently a bug in jQM 1.4.2. The CSS forces all ui-btn in a toolbar(header or footer) to be
                     set to display:inline-block.  This interferes with the Grid making the buttons appear normal sized.
                     To fix this we had to override the style with a 'block-button' class referenced in app.css, this
                     should be removed when the bug is fixed.-->
                <div class="ui-block-a">
                    <a class="ui-btn ui-corner-all ui-shadow ui-btn-b block-button" onclick="$('#submit-add-btn').trigger('click');">Save</a>
                </div>
                <div class="ui-block-b">
                    <a class="ui-btn ui-corner-all ui-shadow block-button" onclick="$('#clear-add-btn').trigger('click');">Clear</a>
                </div>
                <div class="ui-block-c">
                    <a href="#contacts-list-page" class="ui-btn ui-corner-all ui-shadow block-button" onclick="$('#cancel-add-btn').trigger('click');">Cancel</a>
                </div>
            </fieldset>
        </div>
    </div>

    <!-- A pre-populated form for editing a contact -->
    <div data-role="page" id="contacts-edit-page" class="ui-page-theme-a" >
        <div data-role="panel" id="contacts-edit-page-menu-panel">
            <ul data-role="listview" id="contacts-edit-page-menu-panel-listview">
                <li><a href="#contacts-add-page">Add Contact</a></li>
                <li><a href="#contacts-list-page">List view</a></li>
                <li><a href="#about-page">About</a></li>
                <li><a href="#contacts-theming-dialog" data-rel="popup" data-position-to="window">Themes</a></li>
            </ul>
        </div>
        <div data-role="header" data-position="fixed" >
            <a href="#contacts-edit-page-menu-panel" id="contacts-edit-page-menu-button" class="ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-notext ui-mini ui-btn-inline">Menu</a>
            <h1>Edit Contact</h1>
            <a href="#contact-delete-dialog" id="contacts-delete-button" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-mini ui-btn-inline" data-rel="popup" data-position-to="window">Delete</a>
        </div>
        <div role="main" class="ui-content">
            <!--
                PUT and DELETE are not supported in an HTML form, you must use POST.
                  Please see http://www.w3.org/TR/2010/WD-html5-diff-20101019/#changes-2010-06-24

                In order to catch server side errors we need to disable the automatic page transition when the form is
                  submitted.  This done is by adding data-ajax="false" to the form element.  We then manually change the page
                  in the function that handles form submission. Thus allowing us to control when the form transitions to
                  another page.
             -->
            <form name="contacts-edit-form" id="contacts-edit-form" class="contact_info" method="post" data-ajax="false">
                <div>
                    <label for="contacts-edit-input-firstName">First Name:</label>
                    <input name="firstName" id="contacts-edit-input-firstName" class="name" data-clear-btn="true" value="" placeholder="Enter a first name." type="text"/>
                </div>
                <div>
                    <label for="contacts-edit-input-lastName">Last Name:</label>
                    <input name="lastName" id="contacts-edit-input-lastName" class="name" data-clear-btn="true" value="" placeholder="Enter a last name." type="text"/>
                </div>
                <div>
                    <label for="contacts-edit-input-tel">Phone:</label>
                    <input name="phoneNumber" id="contacts-edit-input-tel" class="phoneNumber" data-clear-btn="true" value="" type="tel"/>
                </div>
                <div>
                    <label for="contacts-edit-input-email">Email:</label>
                    <input name="email" id="contacts-edit-input-email" class="email" data-clear-btn="true" value="" placeholder="name@company.domain" type="email"/>
                </div>
                <div>
                    <label for="contacts-edit-input-date">Birth Date:</label>
                    <input name="birthDate" id="contacts-edit-input-date" class="birthDate" data-clear-btn="true" value="" placeholder="YYYY-MM-DD" type="date" min="1900-01-01"/>
                </div>
                <div>
                    <input name="id" id="contacts-edit-input-id" value="" type="hidden"/>
                </div>
                <input id="submit-edit-btn" data-inline="true" type="submit" value="Save" />
                <input id="reset-edit-btn" data-inline="true" type="reset" value="Reset"  />
                <input id="cancel-edit-btn" data-inline="true" type="reset" value="Cancel"  />
            </form>
        </div>
        <div data-role="footer" data-position="fixed" >
            <fieldset class="ui-grid-b">
                <!-- There is currently a bug in jQM 1.4.2. The CSS forces all ui-btn in a toolbar(header or footer) to be
                     set to display:inline-block.  This interferes with the Grid making the buttons appear normal sized.
                     To fix this we had to override the style with a 'block-button' class referenced in app.css, this
                     should be removed when the bug is fixed.-->
                <div class="ui-block-a">
                    <a class="ui-btn ui-corner-all ui-shadow ui-btn-b block-button" onclick="$('#submit-edit-btn').trigger('click');">Save</a>
                </div>
                <div class="ui-block-b">
                    <a class="ui-btn ui-corner-all ui-shadow block-button" onclick="$('#reset-edit-btn').trigger('click');">Reset</a>
                </div>
                <div class="ui-block-c">
                    <a href="#contacts-list-page" class="ui-btn ui-corner-all ui-shadow block-button" onclick="$('#cancel-edit-btn').trigger('click');">Cancel</a>
                </div>
            </fieldset>
        </div>
        <!-- A delete confirmation dialog. -->
        <div data-role="popup" id="contact-delete-dialog" data-overlay-theme="b">
            <div data-role="header">
                <h1>Delete Contact</h1>
            </div>
            <div role="main" class="ui-content">
                <!-- PUT and DELETE are not supported in an HTML form.  Please see http://www.w3.org/TR/2010/WD-html5-diff-20101019/#changes-2010-06-24
                     That is why we are using a dialog with simple Yes/No.  The ID of the Contact to be deleted will programatically be
                     pulled in from the Update form.
                -->
                <h3>Are you sure you want to Delete?</h3>
                <a href="#contacts-list-page" id="confirm-delete-button" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">Yes</a>
                <a href="#contacts-list-page" id="cancel-delete-button" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">No</a>
            </div>
        </div>
    </div>

</body>
</html>
